<!--围栏地图页-->
<template>
  <!--  <h1> - 围栏地图页 GeofenceMapView.vue</h1>-->
  <div style="height: 6vh;background-color:#fff;padding:10px 20px;">
    <span style="line-height:60px;font-size:20px;">新增围栏</span>
    <el-button type="primary" style="float:right;margin-top:13px;" @click="router.push('/geofence')">返回
    </el-button>
  </div>
  <!-- 创建地图容器元素 -->
  <div id="mapContainer" style="height: 80vh;width: 100%"></div>
  <!-- 新增电子围栏弹窗 -->
  <el-dialog title="围栏信息" v-model="dialogVisible" :before-close="closeDialog">
    <el-form label-width="80px">
      <el-form-item label="围栏名称">
        <el-input v-model="geofence.name" placeholder="请输入围栏名称"></el-input>
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button type="primary" @click="closeDialog">取消</el-button>
      <el-button type="primary" @click="saveGeofence">确定</el-button>
    </template>
  </el-dialog>

</template>

<script setup>

import router from "@/router";
import {nextTick, onMounted, ref} from "vue";
import {DrawScene, DrawControl, OperateEventType} from 'bmap-draw';
import axios from "axios";
import {ElMessage} from "element-plus";
import qs from "qs";

// 定义
const geofence = ref({
  // 围栏名称
  name: '',
  // 围栏信息
  position: {}
});
// 定义全局变量，保存地图对象
var map;

// 一进入页面就加载地图
onMounted(() => {
  /**
   * nextTick 函数通常与 Vue.js 框架相关联。在 Vue.js 中
   * nextTick 是一个全局 API，它返回一个 Promise，允许你在下一个 DOM 更新周期结束之后执行一些操作。
   * 这通常用于确保在 DOM 更新完成后访问或操作 DOM。
   */
  nextTick(() => {
    // 创建地图实例
    map = new BMapGL.Map("mapContainer");
    // 设置中心点经纬度
    let point = new BMapGL.Point(116.96429303298055, 33.51012688571954);
    // 地图初始化，同时设置地图展示级别
    map.centerAndZoom(point, 15);
    // 添加鼠标绘制控件
    const scene = new DrawScene(map);
    const drawContrl = new DrawControl(scene, {
      enableTips: false,
      anchor: BMAP_ANCHOR_TOP_RIGHT,
      drawingItems: [
        'circle',
        'rectangle'
      ]
    });

    // 给图形绘制结束添加监听事件,返回触发事件的电子围栏元素
    scene.addEventListener(OperateEventType.COMPLETE, (event) => {
      // 绘制完成，点✅时，显示弹窗，让用户输入围栏名称
      dialogVisible.value = true;
      // 打印触发事件的电子围栏元素
      console.log(event.target);
      // 获取围栏数据
      let overlay = event.target.overlay;
      console.log(overlay);
      // 判断绘制的图形是圆形还是方形
      if (overlay instanceof BMapGL.Circle) {
        // 圆形
        // 设置围栏类型为circle
        geofence.value.position.type = 'circle';
        // 设置围栏半径
        geofence.value.position.radius = overlay.getRadius();
        geofence.value.position.latitude = overlay.getCenter().lat;
        geofence.value.position.longitude = overlay.getCenter().lng;
        console.log('**********************')
        console.log(geofence.value);
        console.log(geofence.value.position);
      } else {
        // 方形
        let recPoints = []
        for (let i = 0; i < 4; i++) {
          recPoints.push(overlay.points[i].latLng.lng + '-' + overlay.points[i].latLng.lat)
          console.log('**********************')
          console.log(recPoints);
        }
        // 设置围栏类型为方形
        geofence.value.position.type = 'rectangle';
        // 转为字符串类型
        geofence.value.position.recPoints = recPoints.join(',');
        console.log('**********************')
        console.log(geofence.value);
        console.log(geofence.value.position);
      }
    });

    map.addControl(drawContrl);
  })
})
// 控制弹窗
const dialogVisible = ref(false);

// 关闭弹窗的方法
const closeDialog = () => {
  if (confirm('确定取消新增围栏吗')) {
    // 关闭窗口
    dialogVisible.value = false;
    // 清空绘制的圆形或者方形
    map.clearOverlays();
  }
}
// 新增围栏的方法
const saveGeofence = () => {
  if (!geofence.value.name || geofence.value.name.trim().length === 0) {
    ElMessage.error('围栏名称不能为空');
    return;
  }
  // position属性是一个对象，后端需要的是String类型，需要转换一下
  geofence.value.position = JSON.stringify(geofence.value.position)
  // 转为查询字符串，后端就不需要把对象在转换了
  let data = qs.stringify(geofence.value);
  console.log(data);
  axios.post(BASE_URL + '/v1/geofence/save/',data).then((response) => {
    if (response.data.code === 2000) {
      ElMessage.success('新建成功');
      // 关闭弹窗
      dialogVisible.value = false;
    }else {
      ElMessage.error(response.data.msg)
    }
  });
}

</script>

<style scoped>

</style>